<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统配置 - 任务提醒系统</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        .config-form {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .nav-tabs {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="config-form">
            <h2 class="mb-4">系统配置</h2>

            <!-- 配置分组标签页 -->
            <ul class="nav nav-tabs">
                {foreach $groups as $key => $name}
                <li class="nav-item">
                    <a class="nav-link {eq name='current_group' value='$key'}active{/eq}" 
                       href="?group={$key}">{$name}</a>
                </li>
                {/foreach}
            </ul>

            <!-- 配置表单 -->
            <form method="post" action="/system/save" class="needs-validation" novalidate>
                {foreach $configs[$current_group] as $config}
                <div class="mb-3">
                    <label for="{$config.config_key}" class="form-label">
                        {$config.config_name}
                        {notempty name="config.config_description"}
                        <small class="text-muted">({$config.config_description})</small>
                        {/notempty}
                    </label>

                    {switch name="config.config_type"}
                        {case value="info"}
                            <div class="alert alert-info">
                                {$config.config_value}
                            </div>
                        {/case}
                        {case value="text"}
                            <input type="text" 
                                   class="form-control" 
                                   id="{$config.config_key}" 
                                   name="{$config.config_key}" 
                                   value="{$config.config_value}"
                                   required>
                        {/case}
                        {case value="password"}
                            <input type="password" 
                                   class="form-control" 
                                   id="{$config.config_key}" 
                                   name="{$config.config_key}" 
                                   value="{$config.config_value}"
                                   autocomplete="new-password">
                        {/case}
                        {case value="textarea"}
                            <textarea class="form-control" 
                                      id="{$config.config_key}" 
                                      name="{$config.config_key}" 
                                      rows="3">{$config.config_value}</textarea>
                        {/case}
                        {case value="select"}
                            <select class="form-select" 
                                    id="{$config.config_key}" 
                                    name="{$config.config_key}">
                                {notempty name="config.options"}
                                    {foreach $config.options as $option}
                                        <option value="{$option.value}" 
                                                {eq name="option.value" value="$config.config_value"}selected{/eq}>
                                            {$option.label}
                                        </option>
                                    {/foreach}
                                {/notempty}
                            </select>
                        {/case}
                    {/switch}
                </div>
                {/foreach}

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="submit" class="btn btn-primary me-2">保存配置</button>
                    <button type="button" class="btn btn-danger" id="lockBtn">锁定配置</button>
                </div>
            </form>

            <!-- 确认锁定模态框 -->
            <div class="modal fade" id="confirmModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认锁定</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>您确定要锁定系统配置吗？此操作不可逆！</p>
                            <div class="alert alert-danger">
                                <strong>警告：</strong>锁定后，将无法通过此页面修改系统配置！<br>
                                后续配置修改需要使用超级管理员账号通过API接口进行。
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-danger" id="confirmLockBtn">确定锁定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()

        // 处理表单提交
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            var formData = new FormData(this);
            
            // 如果是理员配置，进行额外验证
            if (formData.get('admin_username')) {
                if (formData.get('admin_password') !== formData.get('admin_confirm_password')) {
                    alert('两次输入的密码不一致');
                    return;
                }
                
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.get('admin_email'))) {
                    alert('请输入有效的邮箱地址');
                    return;
                }
            }

            fetch(this.action, {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('保存成功');
                    window.location.reload();
                } else {
                    alert(data.message || '保存失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('保存失败，请稍后重试');
            });
        });

        // 锁定按钮点击事件
        document.getElementById('lockBtn').addEventListener('click', function() {
            var modal = new bootstrap.Modal(document.getElementById('confirmModal'));
            modal.show();
        });

        // 确认锁定按钮点击事件
        document.getElementById('confirmLockBtn').addEventListener('click', function() {
            // 发送锁定请求
            fetch('/system/lock', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert(data.message);
                    window.location.href = '/';  // 跳转到首页
                } else {
                    alert(data.message || '锁定失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('锁定失败，请稍后重试');
            });
        });
    </script>
</body>
</html> 